<%@page import="org.proddevplm.dao.data.designForX.DesignForX"%>
<%@page import="java.util.List"%>
<%@page import="org.proddevplm.constants.ControllerConstants"%>
<%@page import="org.proddevplm.business.administration.constants.AdminConstants"%>

<script>

	$(function(){
		$("button").button();
		$("#addDfXGDiv").hide();
	})
	
	function loadGuidelinesWithReq(request, page){
		$.post(request, function(data) {
	        $("#guidelinesDiv").load(page);
	    });
	}

	function getGuidelines(id){
		loadGuidelinesWithReq("/proddev/controller?manager=adminManager&method=16&dfxId="+id,"content/project/administration/guidelinesList.jsp")
	}
	
	function updateDfXGuideline(){
		var dfxGId = document.getElementById('dfxGuidelines').value;
		var text = document.getElementById('detailedInfo').value;
		
		var arguments = "dfxGId="+dfxGId+"&guidelineDetails="+text;
		ajaxCall("adminManager", "18", arguments, null);
	}
	
	function addDfXGuideline(){
		$("#content").hide();
		$("#addDfXGDiv").show();
	}
		
	function saveGuideline(){	
		var id = document.getElementById('dfxCSelect').value;
		$("#dfxId").val(id);
		var name = document.getElementById('guidelineName').value;
		$("#guideline").val(name);
		var details = document.getElementById('guidelineDetails').value;
		$("#details").val(details);
		document.forms['addNewGuideline'].submit();
	}

</script>

<%
	List<DesignForX> allDFXInDB = (List)session.getAttribute("allDFXInDB");
%>

<div style="width:100%;">
	
	<div id="content" style="width:100%; margin-top:10px">
		<div id="guidelinesDB" style="width:100%; margin-top:20px; ">
			<div class="pageTitle" style="text-align:center; font-weight:bold;">
				Design for X guidelines saved in the Database
			</div>
		</div>
	
		<div class="containerSmall" style="width:48%; height:200px; margin-top:10px; float:left">
			<div class="pageTitle" style="width:100%; font-weight:bold">
				Please select the DfX concept
			</div>
			
			<select class="regInput" id="dfxConcepts" name="dfxConcepts" onchange="getGuidelines(this.value)" size="10" style="width:100%; margin-top:10px;">
				<%for(int i=0; i<allDFXInDB.size(); i++){ 
					DesignForX dfx = allDFXInDB.get(i);%>
					<option value="<%=dfx.getId() %>"><%=dfx.getDfxName() %></option>
				<%} %>
			</select>
		</div>
		
		<div class="containerSmall" style="width:49%; height:200px; margin-top:10px; margin-left:0.5%; float:left">
			<div class="pageTitle" style="width:100%; font-weight:bold">
				Please select the DfX guideline
			</div>
			<div id="guidelinesDiv" >
			
			</div>
		</div>
		<div style="clear:both"></div>
		
		<div class="containerSmall" style="width:auto; margin-top:10px">
			<div class="pageTitle" style="width:100%; font-weight:bold">
				Details about selected DfX Guideline
			</div>
			<div id="guidelinesContent" ></div>
		</div>
		<div style="width:100%; margin-top:10px; float:left">
			<button id="updateDfXGuideline" name="updateDfXGuideline" onclick="updateDfXGuideline()" style="width:25%; font-weight:bold; font-size:small; float:left">Update guideline information</button> 
			<button id="addDfXGuideline" name="addDfXGuideline" onclick="addDfXGuideline()" style="width:25%; font-weight:bold; font-size:small; float:right">Add new guideline</button>
			<div style="clear:both"></div>
		</div>
	</div>
	
	<div id="addDfXGDiv" style="width:auto; margin-top:10px">
		<div class="containerSmall" style="width:auto; margin-top:10px;">
			<div class="pageTitle" style="font-weight:bold; text-align:center">
				Add new guideline for DfX concept
			</div>
			<div style="margin-top:10px; font-weight:bold">
				Please select Design for X concept
			</div>
			<select class="regInput" id="dfxCSelect" name="dfxCSelect" size="1" style="width:40%; margin-top:5px;">
				<%for(int i=0; i<allDFXInDB.size(); i++){ 
					DesignForX dfx = allDFXInDB.get(i);%>
					<option value="<%=dfx.getId() %>"><%=dfx.getDfxName() %></option>
				<%} %>
			</select>
			
			<div style="margin-top:10px; font-weight:bold">
				Add Design for X guideline
			</div>
			<input class="regInput" id="guidelineName" name="guidelineName" style="width:50%; margin-top:5px"/>
			
			<div style="margin-top:10px; font-weight:bold">
				Add details about the guideline
			</div>
			<textarea class="regInput" id="guidelineDetails" name="guidelineDetails" rows"5" style="width:100%; margin-top:5px"></textarea>
			<button name="saveGuideline" id="saveGuideline" onclick="saveGuideline()" style="width:30%; margin-top:10px; font-size:small; font-weight:bold;">Save guideline</button>
		</div>
		<form name="addNewGuideline" method="post" action="/proddev/controller" style="margin:0px">
			<input type = "hidden" name = "<%=ControllerConstants.MANAGER_KEY%>" value = "<%=ControllerConstants.ADMIN_MANAGER%>"/>
			<input type = "hidden" name = "<%=ControllerConstants.METHOD_KEY%>" value = "<%=AdminConstants.ADD_GUIDELINE%>"/>
			<input type="hidden" name="dfxId" id="dfxId"/>
			<input type="hidden" name="guideline" id="guideline"/>
			<input type="hidden" name="details" id="details"/>
		</form>
	</div>
	
	<div style="clear:both"></div>
</div>